<!-- 虚拟人交互模拟-->
<template>
  <div class="virtual-person">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>虚拟人交互模拟</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="virtual-person-interaction">  
    <el-form :model="virtualPerson" ref="virtualPersonForm" label-width="120px">  
      <!-- 基本信息 -->  
      <el-form-item label="姓名">  
        <el-input v-model="virtualPerson.name"></el-input>  
      </el-form-item>  
      <el-form-item label="状态">  
        <el-radio-group v-model="virtualPerson.status">  
          <el-radio label="active">活跃</el-radio>  
          <el-radio label="inactive">休眠</el-radio>  
        </el-radio-group>  
      </el-form-item>  
  
      <!-- 外观设置 -->  
      <el-form-item label="肤色">  
        <el-color-picker v-model="virtualPerson.skinColor"></el-color-picker>  
      </el-form-item>  
      <el-form-item label="发型">  
        <el-select v-model="virtualPerson.hairStyle">  
          <el-option label="短发" value="short"></el-option>  
          <el-option label="长发" value="long"></el-option>  
        </el-select>  
      </el-form-item>  
        <!-- 表情设置 -->  
        <el-form-item label="表情">  
          <el-radio-group v-model="virtualPerson.expression">  
            <el-radio label="happy">开心</el-radio>  
            <el-radio label="sad">伤心</el-radio>  
            <el-radio label="angry">生气</el-radio>  
          </el-radio-group>  
        </el-form-item>
  
      <!-- 交互设置 -->  
      <el-form-item label="动作">  
        <el-select v-model="selectedAction" placeholder="请选择动作">  
          <el-option v-for="action in actions" :key="action.value" :label="action.label" :value="action.value"></el-option>  
        </el-select>  
        <el-button @click="performAction">执行动作</el-button>  
      </el-form-item>  
      <el-form-item label="语音">  
        <el-input type="textarea" v-model="virtualPerson.speech"></el-input>  
        <el-button style="margin-top: 20px;" @click="speak">说话</el-button>  
        <el-alert style="margin-top: 20px;" v-if="speechBubble" type="success" show-icon :closable="false" :description="speechBubble"></el-alert>
      </el-form-item>  
  
      <!-- 虚拟人预览 -->  
       <div class="virtual-person-preview">  
        <img :src="virtualPerson.avatar" alt="虚拟人预览" />  
        <p>当前状态：{{ virtualPerson.status }}</p>  
      </div>  
      
    </el-form>  
  </div>  
  </div>
</template>

<script>
export default {
  data() {
    return {
      virtualPerson: {  
        name: '高级数字虚拟人',  
        status: 'active',  
        skinColor: '#FFFFFF',  
        hairStyle: 'short',  
        speech: '',  
        avatar: 'https://img2.baidu.com/it/u=1510805675,2542674489&fm=253&fmt=auto&app=138&f=JPEG?w=630&h=352', // 虚拟人默认图片 
        expression: 'happy',  
      },  
      actions: [  
        { label: '挥手', value: 'wave' },  
        { label: '跳舞', value: 'dance' }, 
        { label: '跑步', value: 'pao' },  
       
      ],  
      selectedAction: '',  
    }
  },

  created() {
  
  },
  methods: {
    performAction() {  
      //执行动作的逻辑
      console.log(`虚拟人执行了动作：${this.selectedAction}`);  
      if (this.selectedAction === 'wave') {  
        this.virtualPerson.expression = 'happy';  
      } else if (this.selectedAction === 'dance') {  
        this.virtualPerson.expression = 'sad';  
      } else{
        this.virtualPerson.expression = 'angry';  
      }
      // 重置选中动作  
      this.selectedAction = ''; 
    },  
    speak() {  
       // 处理虚拟人的说话逻辑   展示文字气泡
       this.speechBubble = `虚拟人说：${ this.virtualPerson.speech}`;  
      // 展示语音气泡一段时间后消失  
      setTimeout(() => {  
        this.speechBubble = '';  
      }, 3000);  
      // 清空输入框  
      this.virtualPerson.speech = '';   
    },
      
  },  
     
  
}
</script>

<style scoped>  
   .virtual-person-interaction {  
  width: 100%;  
  max-width: 800px;  
  margin: 0 auto;  
}  
  
.virtual-person-preview img {  
  width: 200px;  
  height: 200px;  
  border-radius: 50%;  
  object-fit: cover;  
  margin-bottom: 10px;  
} 
</style>

 
 